<template>
  <el-dialog
    title="核销记录"
    center
    width="fit-content"
    :visible="show"
    :before-close="cancel"
  >
    <el-table :data="list">
      <el-table-column type="index" width="100" label="序号" align="center">
      </el-table-column>
      <el-table-column
        width="150"
        label="用户姓名"
        prop="name"
        align="center"
      ></el-table-column>
      <el-table-column
        width="150"
        label="用户手机号"
        prop="phone"
        align="center"
      ></el-table-column>
      <el-table-column
        width="150"
        label="用户编号"
        prop="userCode"
        align="center"
      ></el-table-column>
      <el-table-column
        width="150"
        label="核销总金额"
        prop="amount"
        align="center"
      ></el-table-column>
      <el-table-column
        width="150"
        label="订单总笔数"
        prop="orderNums"
        align="center"
      ></el-table-column>
    </el-table>
    <!-- 分页工具条 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.pageNo"
      :page-sizes="[20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, jumper, next, pager, prev"
      :total="page.pageTotal"
    ></el-pagination>
  </el-dialog>
</template>

<script>
import BusinessApi from "@/api/business/business";
export default {
  props: {
    show: {
      type: Boolean
    },
    businessId: {
      type: Number | String
    }
  },
  data() {
    return {
      page: {
        pageNo: 1,
        pageSize: 20,
        total: 1
      },
      list: []
    };
  },
  watch: {
    async show(val) {
      if (!val) return;
      this.page = this.$options.data().page;
    }
  },
  methods: {
    async getData() {
      const {
        page: { pageNo, pageSize },
        businessId
      } = this;
      const params = {
        pageNo,
        pageSize,
        businessId
      };
      const { data = [] } = BusinessApi.listOrderVerify(params);
      this.list = data;
    },
    handleSizeChange(size) {
      this.page.pageSize = size;
      this.getData();
    },
    handleCurrentChange(val) {
        this.page.pageNo = val;
        this.getData();
    },
    cancel() {
      this.$emit("update:show", false);
    }
  }
};
</script>

<style lang="scss" scoped></style>
